<template>
  <div class="users-base-wrapper">
    <!-- <div class="module-name">受试者状态</div> -->
    <div class="details-layout">
      <el-row style="text-align: left; margin-bottom: 16px;">
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      </el-row>
      <el-table
        :data="statusList"
        :border="true"
        :stripe="true"
        :header-cell-style="{background:'rgba(117, 60, 202, 0.04)'}"
        style="width: 100%">
        <el-table-column
          prop="projectId"
          label="研究代码"
          align="center"
          width="180">
          <span>{{ projectCode }}</span>
        </el-table-column>
        <el-table-column
          prop="codeValue"
          align="center"
          label="编码值">
        </el-table-column>
        <el-table-column
          prop="statusName"
          align="center"
          label="状态名称">
        </el-table-column>
        <el-table-column
          prop="opt"
          label="操作">
          <template slot-scope="scope">
            <el-button  type="default" size="small" @click="handleEdit(scope.row)"><i class="el-icon-edit"></i></el-button>
            <el-button  type="default" size="small" @click="handleDelete(scope.row)"><i class="el-icon-delete"></i></el-button>
          </template>
        </el-table-column>
      </el-table>
      <add-record :projectId="projectId" :dialogVisible="dialogVisible" :dialogTitle="dialogTitle" :editData="editData" @handleCancel="handleCancel"></add-record>
    </div>
  </div>
</template>
<script>

import { mapActions } from 'vuex'
import addRecord from './component/add-record.vue'

export default {
  name: 'users-manage',
  components: {
    addRecord
  },

  data() {
    return {
      dialogVisible: false,
      dialogTitle: '',
      editData: {},
      statusList: [],
      projectCode: '',
      projectId: ''
    }
  },
  mounted() {
    this.projectId = localStorage.getItem('sys-project-id') || ''
    this.projectCode = localStorage.getItem('sys-project-code') || ''
    this.getSubjectStatusList()
  },

  methods: {
    ...mapActions('subjectStatus', ['qryProjectSubjectStatusList', 'deleteSubjectStatus']),
    
    // 查询受试者状态列表
    getSubjectStatusList() {
      const params = {
        projectId: this.projectId
      }
      this.qryProjectSubjectStatusList({ params }).then((res) => {
        console.log(res)
        const { data, code, message } = res
        
        if (code === 200) {
          this.statusList = data
        } else {
          this.$message.error(message || '服务异常，请稍后重试!')
        }
      })
    },

    // 添加受试者状态
    handleAdd() {
      this.dialogVisible = true
      this.editData = {}
      this.dialogTitle = '新建受试者状态'
    },

    // 编辑
    handleEdit(record) {
      this.dialogTitle = '编辑受试者状态'
      this.dialogVisible = true
      this.editData = { ...record }
    },

    // 关闭弹框
    handleCancel(type) {
      this.dialogVisible = false
      if (type === 'refresh') { // 是刷新列表
        this.getSubjectStatusList()
      }
    },

    // 删除
    handleDelete(row) {
      const params = {
        subjectStatusId: row.id
      }
      this.$confirm('确定删除该条数据吗？', '删除提示', {
        type: 'warning'
      }).then(res => {
        this.deleteSubjectStatus({ params })
          .then(res => {
            if (res.code === 200) {
              this.$message({ message: '删除成功', type: 'success' })
              this.getSubjectStatusList()
            }
          })
      })
    },
  },
}
</script>
<style lang="scss" scoped>
  @import './index.scss';
</style>
